<template>
  <div class="knowledge">
    <div class="list_l">
      <div class="l_top">
        <img src="../assets/img/search_icon.png">
        <h4>专家提取信息</h4>
    </div>
      <ul>
        <li>
          <p class="name">名称</p>
          <p class="por">甘草</p>
        </li>
        <li>
          <p class="name">别名</p>
          <p class="por">无</p>
        </li>
        <li>
          <p class="name">分类</p>
          <p class="por">山草</p>
        </li>
        <li>
          <p class="name">环境</p>
          <p class="por">无</p>
        </li>
        <li>
          <p class="name">五味</p>
          <p class="por">甘</p>
        </li>
        <li>
          <p class="name">四气</p>
          <p class="por">平</p>
        </li>
        <li>
          <p class="name">取自</p>
          <select>
            <option>本草便读</option>
          </select>
        </li>
      </ul>
      <el-button type="success" size="small" class="fenxi">进行分析</el-button>
    </div>
    <div class="box-body">
    <div class="search">
      <div class="left">
        <span>关联度：</span>
        <select>
          <option>6</option>
        </select>
        <span>支持度：</span>
        <select>
          <option>6</option>
        </select>
        <input>
        <button>查询</button>
        <button>挖掘分析</button>
      </div>
      <p class="title">原文出处</p>
    </div>
    <div class="body">
      <ul>
        <li>
          <div class="title">
            <h3>《本草纲目》</h3>
            <p class="dynasty">朝代：清</p>
          </div>
          <p class="text">      习近平，这位以沉稳、持重、自信、坦诚的个性风格被西方媒体所了解的中国“新当家”，在当选总书记后第一次公开讲话中，一语“梦”惊人——以简简单单的三个中国汉字：“中国梦”，浓缩概括了新一代领导人的执政理念和目标。</p>
          <small>作者：李时珍（明）</small>
        </li>
        <li>
          <div class="title">
            <h3>《本草纲目》</h3>
            <p class="dynasty">朝代：清</p>
          </div>
          <p class="text">      习近平，这位以沉稳、持重、自信、坦诚的个性风格被西方媒体所了解的中国“新当家”，在当选总书记后第一次公开讲话中，一语“梦”惊人——以简简单单的三个中国汉字：“中国梦”，浓缩概括了新一代领导人的执政理念和目标。</p>
          <small>作者：李时珍（明）</small>
        </li>
        <li>
          <div class="title">
            <h3>《本草纲目》</h3>
            <p class="dynasty">朝代：清</p>
          </div>
          <p class="text">      习近平，这位以沉稳、持重、自信、坦诚的个性风格被西方媒体所了解的中国“新当家”，在当选总书记后第一次公开讲话中，一语“梦”惊人——以简简单单的三个中国汉字：“中国梦”，浓缩概括了新一代领导人的执政理念和目标。</p>
          <small>作者：李时珍（明）</small>
        </li>
        <li>
          <div class="title">
            <h3>《本草纲目》</h3>
            <p class="dynasty">朝代：清</p>
          </div>
          <p class="text">      习近平，这位以沉稳、持重、自信、坦诚的个性风格被西方媒体所了解的中国“新当家”，在当选总书记后第一次公开讲话中，一语“梦”惊人——以简简单单的三个中国汉字：“中国梦”，浓缩概括了新一代领导人的执政理念和目标。</p>
          <small>作者：李时珍（明）</small>
        </li>
        <li>
          <div class="title">
            <h3>《本草纲目》</h3>
            <p class="dynasty">朝代：清</p>
          </div>
          <p class="text">      习近平，这位以沉稳、持重、自信、坦诚的个性风格被西方媒体所了解的中国“新当家”，在当选总书记后第一次公开讲话中，一语“梦”惊人——以简简单单的三个中国汉字：“中国梦”，浓缩概括了新一代领导人的执政理念和目标。</p>
          <small>作者：李时珍（明）</small>
        </li>
        <li>
          <div class="title">
            <h3>《本草纲目》</h3>
            <p class="dynasty">朝代：清</p>
          </div>
          <p class="text">      习近平，这位以沉稳、持重、自信、坦诚的个性风格被西方媒体所了解的中国“新当家”，在当选总书记后第一次公开讲话中，一语“梦”惊人——以简简单单的三个中国汉字：“中国梦”，浓缩概括了新一代领导人的执政理念和目标。</p>
          <small>作者：李时珍（明）</small>
        </li>
        <li>
          <div class="title">
            <h3>《本草纲目》</h3>
            <p class="dynasty">朝代：清</p>
          </div>
          <p class="text">      习近平，这位以沉稳、持重、自信、坦诚的个性风格被西方媒体所了解的中国“新当家”，在当选总书记后第一次公开讲话中，一语“梦”惊人——以简简单单的三个中国汉字：“中国梦”，浓缩概括了新一代领导人的执政理念和目标。</p>
          <small>作者：李时珍（明）</small>
        </li>
        <li>
          <div class="title">
            <h3>《本草纲目》</h3>
            <p class="dynasty">朝代：清</p>
          </div>
          <p class="text">      习近平，这位以沉稳、持重、自信、坦诚的个性风格被西方媒体所了解的中国“新当家”，在当选总书记后第一次公开讲话中，一语“梦”惊人——以简简单单的三个中国汉字：“中国梦”，浓缩概括了新一代领导人的执政理念和目标。</p>
          <small>作者：李时珍（明）</small>
        </li>
        <li>
          <div class="title">
            <h3>《本草纲目》</h3>
            <p class="dynasty">朝代：清</p>
          </div>
          <p class="text">      习近平，这位以沉稳、持重、自信、坦诚的个性风格被西方媒体所了解的中国“新当家”，在当选总书记后第一次公开讲话中，一语“梦”惊人——以简简单单的三个中国汉字：“中国梦”，浓缩概括了新一代领导人的执政理念和目标。</p>
          <small>作者：李时珍（明）</small>
        </li>
      </ul>
    </div>
    </div>
    <div class="list_r">
      <div id="myChart" :style="{width: '200px', height: '200px'}"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '1',
          name: '背寒',
          address: '9',
          number:'12'
        }, {
          date: '2',
          name: '背直',
          address: '7',
          number:'12'
        }, {
          date: '3',
          name: '恶心',
          address: '3',
          number:'12'
        }, {
          date: '4',
          name: '额热',
          address: '3',
          number:'12'
        }, {
          date: '5',
          name: '疔肿',
          address: '3',
          number:'12'
        }]
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
//        app.title = '柱状图框选';

        myChart.setOption ({
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
//          legend: {
//            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
//          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          series: [
            {
              name: '直接访问',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
              name: '邮件营销',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [150, 212, 201, 154, 190, 330, 410]
            },
            {
              name: '搜索引擎',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [820, 832, 901, 934, 1290, 1330, 1320]
            }
          ]
        })
      }
    }
  }
</script>

<style>
  .knowledge{
    width:70%;
    margin:auto;
    overflow: auto;
  }
  .search{
    font-size: 14px;
    margin-top:20px;
    width:100%;
    overflow: auto;
    padding-bottom: 30px;
    border-bottom: solid 3px #c3a873;
  }
  .knowledge .search .left{
    float: left;
    width:80%;
  }
  .knowledge .box-body{
    width:60%;
    float: left;
  }
  .knowledge .search input{
    width:30%;
    margin-left: 30px;
  }
  .search .title{
    margin:0;
    float: right;
    font-size: 14px;
    margin-right: 20px;
  }
  .body ul{
    list-style:none;
    padding:0;
    background-color: white;
  }
  .body ul li{
    border-bottom: solid 3px #c3a873;
    padding: 10px;
    overflow:auto;
    margin-bottom: 20px;
  }
  .body ul li h3{
    float: left;
    margin:0;
    padding-left: 10px;
  }
  .body ul li .dynasty{
    float: right;
    margin:0;
    padding: 0px 5px;
    line-height:30px;
    color: red;
    border: solid 1px red;
    margin-right: 10px;
  }
  .body ul li small{
    float: left;
  }
  .body .title{
    overflow: auto;
    width:100%;
    margin-bottom:10px;
  }
  .body .text{
    text-align: left;
    text-indent: 2em;
  }
  .list_l{
    float: left;
    width:20%;
    margin-top: 10px;
    padding:0 10px;
  }
  .l_top{
    overflow: auto;
  }
  .l_top img{
    width:auto;
    float: left;
    margin-top: 20px;
    margin-right:10px;
  }
  .l_top h4{
    float: left;
    margin-bottom: 18px !important;
  }
  .list_l ul{
    margin: 0;
    list-style:none;
    border-top: solid 3px black;
    padding: 0;
    overflow: auto;
  }
  .list_l ul li{
    width:100%;
    border-bottom: solid 1px #dadada;
    overflow: auto;
  }
  .list_l ul li select{
    float: right;
    margin-top: 5px;
  }
  .list_l ul li .name{
    float: left;
    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
    line-height:30px;
  }
  .list_l ul li .por{
    float: right;
    margin-right:10px;
    margin-top: 0;
    margin-bottom: 0;
    line-height:30px;
  }
  .list_r{
    margin-top: 10px;
    float: left;
  }
  .fenxi{
    margin-top: 20px;
  }
</style>
